<template>
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      router
      unique-opened
    >
      <MenuItem
        v-for="item in menuData"
        :key="item.id"
        :item="item"
      />
    </el-menu>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import MenuItem from './MenuItem.vue'
  
  const route = useRoute()
  
  const menuData = ref([
    {
      id: 1,
      name: '首页',
      type: 'page',
      path: '/home',
      icon: 'House'
    },
    {
      id: 2,
      name: '系统管理',
      type: 'directory',
      icon: 'Setting',
      children: [
        {
          id: 21,
          name: '用户管理',
          type: 'page',
          path: '/user',
          icon: 'User'
        },
        {
          id: 22,
          name: '角色管理',
          type: 'page',
          path: '/role',
          icon: 'Avatar'
        },
        {
          id: 23,
          name: '日志管理',
          type: 'page',
          path: '/journal',
          icon: 'Avatar'
        }
      ]
    },
    {
      id: 3,
      name: '数据库管理',
      type: 'directory',
      icon: 'Setting',
      children: [
        {
          id: 31,
          name: '数据字典',
          type: 'page',
          path: '/directory',
          icon: 'Avatar'
        }
      ]
    }
  ])
  const activeMenu = computed(() => route.path)
  </script>
  
  <style scoped>
  .el-menu-vertical {
    border-right: none;
    height: 100vh;
  }
  </style>